<template>
  <view class="result-box">
    <view class="result-item"
          v-for="item in data"
          :key="item.id"
          @click="resultItemClick(item.id)">
      <view class="result-body">
        <view class="title"
              v-html="item.musicName">
        </view>
        <view class="info">
          <image v-if="item.mark === 9007199255011456"
                 src="~@/static/img/sq.png"></image>
          <view v-html="`${item.singer}-${item.musicName}`"></view>
        </view>
      </view>
      <view class="iconfont iconbofang"></view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      /**
       * 搜索结果点击事件，跳转到歌曲播放页
       * @param {number} musicId 歌曲id
       */
      resultItemClick(musicId) {
        console.log(musicId);
        uni.navigateTo({
          url: '/pages/pageDetail/pageDetail?id=' + musicId
        })
      }
    }
  }
</script>

<style lang="scss"
       scoped>
  .result-box {
    border-top: 2px solid #efefef;
    margin-top: 50rpx;
    padding: 0 30rpx;

    .result-item {
      border-bottom: 1px solid #efefef;
      padding: 30rpx 0;
      display: flex;
      align-items: center;

      .result-body {
        flex: 1;

        .title {
          font-size: 28rpx;
          margin-bottom: 12rpx;
        }

        .info {
          font-size: 22rpx;
          color: #898989;
          display: flex;
          align-items: center;

          image {
            width: 34rpx;
            height: 22rpx;
            margin-right: 10rpx;
          }
        }
      }

      .iconfont {
        font-size: 50rpx;
      }
    }
  }
</style>
